<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SOP登录</title>
<link href="resources/styles/main.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="resources/scripts/jquery-ui-1.8.14.custom/css/start/jquery-ui-1.8.14.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="resources/scripts/jquery-ui-1.8.14.custom/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="resources/scripts/jquery-ui-1.8.14.custom/js/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="resources/scripts/jquery-ui-1.8.14.custom/js/jquery.blockUI.js"></script>

<script type="text/javascript">

//检查用户名
function checkUsername(username)
{
	var reg = /^[a-zA-Z0-9_]+$/;
	return reg.test(username);
}

//显示错误
function showErrorMsg(msg)
{
	$('#error_content').html(msg);
	$('#error_message').fadeIn('normal');
}

//隐藏错误
function hideErrorMsg(msg)
{
	$('#error_message').fadeOut('normal');
}

var remember_me = 0;

$(document).ready(function(){
		$('#remember_me').click(function(){
			if(remember_me == 0)
				remember_me = 1;
			else
				remember_me = 0;
		});
	
        //回车提交表单
        $('input').keydown(function(event) {
            switch(event.keyCode) {
                case 13:
                    $('#btn_login').click();
                    break;
            }
        });
    
		//下面四个函数是更改文本框样式的，选中为黄色，否则为白色
		$('#username').focus(function(){
				$('#username').removeClass();
				$('#username').addClass('b14');
			});
			
		$('#username').blur(function(){
				$('#username').removeClass();
				$('#username').addClass('b13');
				//检查用户名
				if(!checkUsername($(this).val()))
				{
					showErrorMsg('用户名不合法');
				}
				else
				{
					$('#error_message').fadeOut('normal');
				}
			});
			
			
		$('#pwd').focus(function(){
				$('#pwd').removeClass();
				$('#pwd').addClass('b14');
			});
			
		$('#pwd').blur(function(){
				$('#pwd').removeClass();
				$('#pwd').addClass('b13');
			});
			
		//Ajax登录
		$('#btn_login').click(function(){
				if(!checkUsername($('#username').val()))
				{
					showErrorMsg('用户名不合法');
					$('#username').removeClass();
					$('#username').addClass('b13_2');
					return;
				}
				$.post(
					'<!--{spUrl c=main a=login}-->',
					{
						'username': $('#username').val(),
						'pwd': $('#pwd').val(),
						'remember_me': remember_me	
					},
					function(data){
							if(data == -1)
								showErrorMsg('用户名不存在');
							if(data == -2)	
								showErrorMsg('密码错误');
							if(data == -3)
								showErrorMsg('通信错误，请稍候再试');
							if(data == -4)
								showErrorMsg('通信错误，请稍候再试');
							if(data == 1)	
								location.href="<!--{spUrl c=main a=dispatch}-->";
					}
				);
		});
	});
</script>

<style type="text/css">
<!--
body {
	background-image: url(resources/images/bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
-->
</style>
</head>

<body>
<div style="width: 869px; position: relative; margin: 0 auto;">
<table width="869" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="698"><table width="36%" border="0" align="right" cellpadding="0" cellspacing="0">
      <tr>
        <td height="40" align="right">用户名：</td>
        <td><input name="username" type="text" class="b13" id="username" />
        </td>
        <div class="ui-widget" id="error_message" style="width: 180px; position: absolute; z-index: 1000; right: -120px; line-height: 12px; _line-height: 1px; display: none;">
			<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
				<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em; _margin-top: -5px;"></span> 
				<strong>错误:</strong> <span id="error_content"></span></p>
			</div>
		</div>
      </tr>
      <tr>
        <td height="40" align="right">密　码：</td>
        <td><input name="pwd" type="password" class="b13" id="pwd" /></td>
      </tr>
      <tr>
        <td height="35" align="right">&nbsp;</td>
        <td><label>
          <input type="checkbox" name="remember_me" id="remember_me"  />
        两周内自动登录 <img src="resources/images/cj128.gif" width="14" height="14" title="保存用户登录状态，两周内不用登录" /></label></td>
      </tr>
      <tr>
        <td height="35" align="right">&nbsp;</td>
        <td><a href="#" id="btn_login"><img src="resources/images/cj129.gif" width="79" height="29" /></a></td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</div>
</body>
</html>
